Tengo una página con dos formularios. Un formulario principal y otro que se puede mostrar en un modal, completamente aislado del formulario principal en el DOM. No son hermanos ni ancestros ni nada. Ambos formularios tienen una función onSubmit y su propio botón con type=submit . Cuando hago clic en el botón Enviar en el formulario modal, también está llamando a la función de onsubmit para el formulario principal. No puedo encontrar la manera de evitar que esto ocurra.
El DOM se ve (muy aproximadamente) así:
<body> <div id="app-root"> <...> <form onsubmit="submitMainForm"> <button type="submit"></button> </form> </...> </div> <div id="modal-root"> <...> <form onsubmit="submitModal"> <button type="submit"></button> </form> </...> </div> </body>Los formularios no se superponen* (en el DOM, ver más abajo re. React) y los botones están en sus respectivos formularios.
Ambas funciones de envío están en la forma general:
e => { e.preventDefault(); doRelevantSubmitActions(); } Basado en algunas otras preguntas SO similares, también intenté dar a los botones diferentes valores de name o devolver false de las funciones onSubmit , pero nada parece evitar que el botón llame a ambas funciones.
Preferiría mantener el patrón type=submit en lugar de simplemente usar las funciones onclick , ya que viene con otra funcionalidad de QOL (como enviar un formulario a través de la tecla Intro)
* Mi única idea es que podría ser un problema de React. El formulario modal ES un elemento secundario del formulario principal en el árbol React, pero utiliza un Portal para el div modal-root para mantenerlos separados en el DOM real. No creo que el componente React esté relacionado con este problema, pero sentí que era una revelación importante.